<!DOCTYPE html>



  


<html class="theme-next mist use-motion" lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.3" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.3">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.3">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.3">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.3" color="#222">





  <meta name="keywords" content="Hexo, NexT" />





  <link rel="alternate" href="/atom.xml" title="Likianta Blog" type="application/atom+xml" />






<meta name="description" content="先来看最终的效果图：  本章内容是根据上章制定好的规范进行的重新设计，其中主界面的两个分页布局变化幅度很大。 本章重点讲解右分页布局的重制，左分页布局会在下章讲解分组设计前补充。">
<meta property="og:type" content="article">
<meta property="og:title" content="09 Anykey右分页重新设计">
<meta property="og:url" content="https://likianta.coding.me/2017/1229172454/index.html">
<meta property="og:site_name" content="Likianta Blog">
<meta property="og:description" content="先来看最终的效果图：  本章内容是根据上章制定好的规范进行的重新设计，其中主界面的两个分页布局变化幅度很大。 本章重点讲解右分页布局的重制，左分页布局会在下章讲解分组设计前补充。">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-31/6414234.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-30/74368233.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-30/70204976.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-30/67952736.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-30/36233783.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-30/75158862.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-30/66451218.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-31/83845588.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-31/79576186.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-31/26814806.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-31/55795504.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-31/73856918.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-24/34998394.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-31/20536407.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-31/99064327.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-31/6414234.jpg">
<meta property="og:updated_time" content="2017-12-31T11:46:15.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="09 Anykey右分页重新设计">
<meta name="twitter:description" content="先来看最终的效果图：  本章内容是根据上章制定好的规范进行的重新设计，其中主界面的两个分页布局变化幅度很大。 本章重点讲解右分页布局的重制，左分页布局会在下章讲解分组设计前补充。">
<meta name="twitter:image" content="http://ozurciydg.bkt.clouddn.com/17-12-31/6414234.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    version: '5.1.3',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://likianta.coding.me/2017/1229172454/"/>





  <title>09 Anykey右分页重新设计 | Likianta Blog</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-CN">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Likianta Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tutorials">
          <a href="/tags/tutorial-catalog/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            教程
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://likianta.coding.me/2017/1229172454/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Likianta">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://ozurciydg.bkt.clouddn.com/18-2-12/72826549.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Likianta Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">09 Anykey右分页重新设计</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-12-29T17:24:54+08:00">
                2017-12-29
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/passport-pandora/" itemprop="url" rel="index">
                    <span itemprop="name">从零开发Anykey</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  7,206
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  33
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>先来看最终的效果图：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-31/6414234.jpg" alt=""></p>
<p>本章内容是根据上章制定好的规范进行的重新设计，其中主界面的两个分页布局变化幅度很大。</p>
<p>本章重点讲解右分页布局的重制，左分页布局会在下章讲解分组设计前补充。</p>
<a id="more"></a>
<h1 id="一、重新制作右分页布局"><a href="#一、重新制作右分页布局" class="headerlink" title="一、重新制作右分页布局"></a>一、重新制作右分页布局</h1><p>在正式开始制作之前，我们需要预先下载两个软件：</p>
<ol>
<li><strong>Axure PR 8：</strong>用于原型设计，然后根据此设计来实现工程布局</li>
<li><strong>X-Mind 8 Pro：</strong>用于制作思维导图，然后根据思维导图来实现工程代码的逻辑结构</li>
</ol>
<p>虽然我们不是专业的设计师或产品经理，但是这两个软件的基本功能其实还是很容易上手的，下面就是简单的应用过程：</p>
<h2 id="1-使用Axure软件进行原型设计"><a href="#1-使用Axure软件进行原型设计" class="headerlink" title="1. 使用Axure软件进行原型设计"></a>1. 使用Axure软件进行原型设计</h2><p>下载好Axure PR 8后，打开软件界面如下所示：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-30/74368233.jpg" alt=""></p>
<h3 id="第一步-开启网格辅助线"><a href="#第一步-开启网格辅助线" class="headerlink" title="第一步 开启网格辅助线"></a>第一步 开启网格辅助线</h3><p>点击 菜单栏 - 布局 - 栅格和辅助线 - 勾选显示网格＆进入网格设置：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-30/70204976.jpg" alt=""></p>
<p>在网格设置中的“网格”标签下勾选“显示网格”和“对齐网格”，设置<code>Spacing = 40px</code>，样式为线：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-30/67952736.jpg" alt=""></p>
<p>这样我们就成功地开启了网格辅助线。网格线有助于我们对组件规范、整齐地摆放，对于有整理癖的人来说非常好。</p>
<h3 id="第二步-拖入一倍切图"><a href="#第二步-拖入一倍切图" class="headerlink" title="第二步 拖入一倍切图"></a>第二步 拖入一倍切图</h3><p>在<a href="https://likianta.coding.me/2017/android01/1230202746/">《关于Android开发中如何使用dp表示长宽 | Likianta Blog》</a>一文中介绍了我们如何在布局中使用合适的切图作为参考，简单来说有以下几点：</p>
<ul>
<li>使用一倍切图（360px*640px）作为原型设计稿</li>
<li>在Android开发中，使用Pixel作为默认的模拟器设备，则我们的xml文件中用<strong>360dp</strong>可以表示屏幕的总宽度，<strong>640dp</strong>代表屏幕的总高度，<strong>数值跟一倍切图稿是1:1的转换关系</strong></li>
</ul>
<p>另外值得一提的是Android的状态栏的高度是24dp，虚拟按键的高度是48dp，也就是说我们的一倍设计稿中有24+48px要从总高度中抛去，所以我们实际可设计的空间范围是：360px*568px。</p>
<p>下面在Axure中的标注和讲解我都会用“px”作为单位，然后到了制作Android xml布局文件的时候改用“dp”，由于数值之间是1:1的转换关系，所以大家不用太纠结 :)</p>
<h3 id="第三步-制作右分页母版"><a href="#第三步-制作右分页母版" class="headerlink" title="第三步 制作右分页母版"></a>第三步 制作右分页母版</h3><p>本章我们的目的是重新制作右分页布局，所以把右分页中的固定元素做成母版（也就是模板），这样方便我们经常复用。</p>
<p>首先从左侧的组件库拖一个矩形2到中间的工作区，在属性面板中设置它的宽度为360px，高度为640px，位置的话就放在（40,80）吧：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-30/36233783.jpg" alt=""></p>
<p>（注：Axure中的位置都是从控件的左上角作为起始点计算的。）</p>
<p>依次拖入下面组件：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-30/75158862.jpg" alt=""></p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-30/66451218.jpg" alt=""></p>
<p>这样我们的右分页母版就完成了。</p>
<p>以后在每次复用时，只需将左下方的母版拖到中间的工作区，并右键“脱离母版”即可自由使用了。</p>
<h3 id="第四步-制作布局里的元素（重点）"><a href="#第四步-制作布局里的元素（重点）" class="headerlink" title="第四步 制作布局里的元素（重点）"></a>第四步 制作布局里的元素（重点）</h3><p>为了让设计显得简洁，这里将之前加入的很多元素都去除掉了，只保留了最核心的部分：</p>
<ul>
<li>头像及头像背景</li>
<li>帐号栏</li>
<li>密码栏</li>
<li>备注栏</li>
<li>扩展信息按钮</li>
<li>保存按钮</li>
</ul>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-31/83845588.jpg" alt=""></p>
<p>另外根据预想的设计规范，按钮应该有丰富的响应动画。最典型的就是按下编辑框后应该有聚焦动画。为此我们给每个编辑框设置了三种常用状态和五种特定状态：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-31/79576186.jpg" alt=""><br><img src="http://ozurciydg.bkt.clouddn.com/17-12-31/26814806.jpg" alt=""></p>
<p>（不过在实际开发中发现这些设计所考虑到的东西是远远不够的。后面我们会一个问题一个问题地解决它们。）</p>
<h3 id="第五步-添加说明注释和跳转链接"><a href="#第五步-添加说明注释和跳转链接" class="headerlink" title="第五步 添加说明注释和跳转链接"></a>第五步 添加说明注释和跳转链接</h3><p>这项工作主要是在控件旁边写一些颜色、相对位置、注意事项这三类说明。主要用到的工具有：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-31/55795504.jpg" alt=""></p>
<p>顺便附上下载链接：<a href="https://pan.baidu.com/s/1dEYYai9" target="_blank" rel="noopener">该设计图原始文件（2017年12月30日）</a></p>
<p>如果你想要尽可能快地上手Axure这个软件，可以看一看我写的<a href="https://likianta.coding.me/2017/uncatalog/1224225200">Axure从零快速上手 第一期</a> :)</p>
<hr>
<h1 id="二、在Android-Studio中实现布局"><a href="#二、在Android-Studio中实现布局" class="headerlink" title="二、在Android Studio中实现布局"></a>二、在Android Studio中实现布局</h1><p>有了原型设计图，你会发现制作xml布局比以前轻松了很多。</p>
<p>不过实际制作过程中会遇到一些比较严重的问题，比如下面提到的：</p>
<p><strong>Q1：如何将Axure中的不透明度百分数转化为Android Studio中的两位十六进制数？</strong></p>
<p>根据下面的<a href="http://blog.csdn.net/lyltiger/article/details/48292419" target="_blank" rel="noopener">透明度参照表</a>：</p>
<table>
<thead>
<tr>
<th>透明度</th>
<th>不透明度</th>
<th>转换成十六进制数</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td><em>00%</em></td>
<td>100%</td>
<td>FF</td>
<td>完全显示</td>
</tr>
<tr>
<td><em>05%</em></td>
<td>95%</td>
<td>F2</td>
<td></td>
</tr>
<tr>
<td><em>10%</em></td>
<td>90%</td>
<td>E5</td>
<td></td>
</tr>
<tr>
<td><em>15%</em></td>
<td>85%</td>
<td>D8</td>
<td></td>
</tr>
<tr>
<td><em>20%</em></td>
<td>80%</td>
<td>CC</td>
<td></td>
</tr>
<tr>
<td><em>25%</em></td>
<td>75%</td>
<td>BF</td>
<td></td>
</tr>
<tr>
<td><em>30%</em></td>
<td>70%</td>
<td>B2</td>
<td></td>
</tr>
<tr>
<td><em>35%</em></td>
<td>65%</td>
<td>A5</td>
<td></td>
</tr>
<tr>
<td><em>40%</em></td>
<td>60%</td>
<td>99</td>
<td></td>
</tr>
<tr>
<td><em>45%</em></td>
<td>55%</td>
<td>8C</td>
<td>往上越来越“深”</td>
</tr>
<tr>
<td><em>50%</em></td>
<td>50%</td>
<td>7F</td>
<td>50%半透明</td>
</tr>
<tr>
<td><em>55%</em></td>
<td>45%</td>
<td>72</td>
<td>往下越来越“浅”</td>
</tr>
<tr>
<td><em>60%</em></td>
<td>40%</td>
<td>66</td>
<td></td>
</tr>
<tr>
<td><em>65%</em></td>
<td>35%</td>
<td>59</td>
<td></td>
</tr>
<tr>
<td><em>70%</em></td>
<td>30%</td>
<td>4C</td>
<td></td>
</tr>
<tr>
<td><em>75%</em></td>
<td>25%</td>
<td>3F</td>
<td></td>
</tr>
<tr>
<td><em>80%</em></td>
<td>20%</td>
<td>33</td>
<td></td>
</tr>
<tr>
<td><em>85%</em></td>
<td>15%</td>
<td>21</td>
<td></td>
</tr>
<tr>
<td><em>90%</em></td>
<td>10%</td>
<td>19</td>
<td></td>
</tr>
<tr>
<td><em>95%</em></td>
<td>05%</td>
<td>0C</td>
<td></td>
</tr>
<tr>
<td><em>100%</em></td>
<td>00%</td>
<td>00</td>
<td>完全透明</td>
</tr>
</tbody>
</table>
<p>PS：</p>
<ul>
<li>Axure和Android Studio用的都是不透明度，所以只需看第2列和第3列的对应关系即可</li>
<li>所以我们在Axure中设计时也尽量取整5整10的不透明度，这样方便照着表直接转换</li>
</ul>
<p><strong>Q2：设计图中的编辑框内右侧的小箭头图标（<code>&gt;</code>）怎么制作？</strong></p>
<p>在<a href="http://t.cn/RHCJi0Y" target="_blank" rel="noopener">Android Studio Asset网站</a>你可以找到这个图标（图标名称“chevron”）。生成图表注意事项：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-31/73856918.jpg" alt=""></p>
<p>终于，我们下面要开始制作右分页布局了：</p>
<hr>
<h1 id="三、制作右分页布局（xml布局代码）"><a href="#三、制作右分页布局（xml布局代码）" class="headerlink" title="三、制作右分页布局（xml布局代码）"></a>三、制作右分页布局（xml布局代码）</h1><p>先看一下最终的效果图：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-24/34998394.jpg" alt=""></p>
<h2 id="1-将布局中用到的文字全部写到strings-xml文件中"><a href="#1-将布局中用到的文字全部写到strings-xml文件中" class="headerlink" title="1. 将布局中用到的文字全部写到strings.xml文件中"></a>1. 将布局中用到的文字全部写到strings.xml文件中</h2><p><code>res/values/strings.xml</code>:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">resources</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"app_name"</span>&gt;</span>AnyKey<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"title_activity_login"</span>&gt;</span>AnyKey<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!-- Strings related to login --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"prompt_email"</span>&gt;</span>Email<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"prompt_password"</span>&gt;</span>Password (optional)<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"action_sign_in"</span>&gt;</span>Sign in or register<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"action_sign_in_short"</span>&gt;</span>Sign in<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"error_invalid_email"</span>&gt;</span>This email address is invalid<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"error_invalid_password"</span>&gt;</span>This password is too short<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"error_incorrect_password"</span>&gt;</span>This password is incorrect<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"error_field_required"</span>&gt;</span>This field is required<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"permission_rationale"</span>&gt;</span>"Contacts permissions are needed for providing email completions."<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!-- Strings related to page2 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"title_hint"</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"title_popup"</span>&gt;</span>▲TITLE<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"title_error"</span>&gt;</span>Please Input Title Strings<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"account_hint"</span>&gt;</span>Account<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"account_popup"</span>&gt;</span>▲ACCOUNT<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"pwd_hint"</span>&gt;</span>Password<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"pwd_popup"</span>&gt;</span>▲PASSWORD<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"note_hint"</span>&gt;</span>Take your note here.<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">"note_popup"</span>&gt;</span>◆NOTE<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">resources</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="2-制作xml布局"><a href="#2-制作xml布局" class="headerlink" title="2. 制作xml布局"></a>2. 制作xml布局</h2><p><code>res/layout/page2.xml</code>（原<code>page_card_list.xml</code>改名了）：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br></pre></td><td class="code"><pre><span class="line">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span><br><span class="line"><span class="tag">&lt;<span class="name">RelativeLayout</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">xmlns:app</span>=<span class="string">"http://schemas.android.com/apk/res-auto"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">xmlns:tools</span>=<span class="string">"http://schemas.android.com/tools"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:background</span>=<span class="string">"@color/blaWindowBackground"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 最外层是一个RelativeLayout，背景色与左分页背景同色 --&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;<span class="name">ScrollView</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 在滑动布局中建一个相对布局。编辑框等控件都在此布局里面 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">RelativeLayout</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span>&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 头像的背景，根据头像主色调来生成（方法在函数中实现） --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_avatar_bg"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"120dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:background</span>=<span class="string">"@color/blaThemeColorWeak"</span> /&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 使用开源控件CircleTextImageView制作圆形头像 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">com.thinkcool.circletextimageview.CircleTextImageView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_avatar"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"80dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"80dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_centerHorizontal</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"80dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:src</span>=<span class="string">"@drawable/avatar_test"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">app:citv_border_color</span>=<span class="string">"@color/blaWindowBackground"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">app:citv_border_width</span>=<span class="string">"2dp"</span> /&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 下面是4个EditText，分别是“标题栏”、“帐号栏”、“密码栏”、“备注栏” --&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 标题栏属性：宽240dp，高28dp，水平居中，与头像相距40dp，背景是一个圆角矩形背景（后面会贴代码），限制为单行输入，文字颜色和hint颜色均在colors.xml文件中定义好了，这里就引用过来。最后设置文字风格为等宽字体（monospace），文字大小14sp，字体默认加粗 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_title"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"240dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"28dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_below</span>=<span class="string">"@id/user_avatar"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_centerHorizontal</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"40dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:background</span>=<span class="string">"@drawable/edt_bg_normal"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:hint</span>=<span class="string">"@string/title_hint"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:inputType</span>=<span class="string">"textCapCharacters"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:paddingEnd</span>=<span class="string">"12dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:paddingStart</span>=<span class="string">"12dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:singleLine</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textColor</span>=<span class="string">"@color/blaTextColorStrong"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textColorHint</span>=<span class="string">"@color/blaTextColorWeak"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textSize</span>=<span class="string">"14sp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textStyle</span>=<span class="string">"bold"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:typeface</span>=<span class="string">"monospace"</span> /&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- 接下来的“帐号栏”和“密码栏”的属性与“标题栏”一样，只是修改为各自的id、hint字符串内容不同而已 --&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 帐号栏 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_account"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"240dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"28dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignTop</span>=<span class="string">"@id/user_title"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_centerHorizontal</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"60dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:background</span>=<span class="string">"@drawable/edt_bg_normal"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:hint</span>=<span class="string">"@string/account_hint"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:paddingEnd</span>=<span class="string">"12dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:paddingStart</span>=<span class="string">"12dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:singleLine</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textColor</span>=<span class="string">"@color/blaTextColorStrong"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textColorHint</span>=<span class="string">"@color/blaTextColorWeak"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textSize</span>=<span class="string">"14sp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textStyle</span>=<span class="string">"bold"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:typeface</span>=<span class="string">"monospace"</span> /&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 密码栏 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_pwd"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"240dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"28dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignTop</span>=<span class="string">"@id/user_title"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_centerHorizontal</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"120dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:background</span>=<span class="string">"@drawable/edt_bg_normal"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:hint</span>=<span class="string">"@string/pwd_hint"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:inputType</span>=<span class="string">"textVisiblePassword"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:paddingEnd</span>=<span class="string">"12dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:paddingStart</span>=<span class="string">"12dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:singleLine</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textColor</span>=<span class="string">"@color/blaTextColorStrong"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textColorHint</span>=<span class="string">"@color/blaTextColorWeak"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textSize</span>=<span class="string">"14sp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textStyle</span>=<span class="string">"bold"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:typeface</span>=<span class="string">"monospace"</span> /&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 备注栏的设置有些不一样，区别在于：宽度为300dp，高度为自适应，但是最低高度值是“7”行（minLines=7），其背景用的是和上面不一样的背景资源（后面也会贴上背景代码），inputType类型是“textMultiLine” --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_note"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"300dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignTop</span>=<span class="string">"@id/user_title"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_centerHorizontal</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"180dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:background</span>=<span class="string">"@drawable/edt_bg_normal_note"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:gravity</span>=<span class="string">"start|top"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:hint</span>=<span class="string">"@string/note_hint"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:inputType</span>=<span class="string">"textMultiLine"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:minLines</span>=<span class="string">"7"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:padding</span>=<span class="string">"12dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textColor</span>=<span class="string">"@color/blaTextColorStrong"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textColorHint</span>=<span class="string">"@color/blaTextColorWeak"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textSize</span>=<span class="string">"14sp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textStyle</span>=<span class="string">"bold"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:typeface</span>=<span class="string">"monospace"</span> /&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 下面是编辑框上的提示文字，也就是这个部分：http://ozurciydg.bkt.clouddn.com/17-12-31/73887956.jpg --&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="comment">&lt;!-- 标题栏提示文字。提示文字仅在框内有输入文字时出现，默认状态下是隐藏的 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_title_txt"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignStart</span>=<span class="string">"@id/user_title"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignTop</span>=<span class="string">"@id/user_title"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginStart</span>=<span class="string">"-10dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"-18dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:text</span>=<span class="string">"@string/title_popup"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textColor</span>=<span class="string">"@color/blaTextColorStrong"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textSize</span>=<span class="string">"12sp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textStyle</span>=<span class="string">"bold"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:visibility</span>=<span class="string">"invisible"</span> /&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 帐号栏提示文字 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_account_txt"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignStart</span>=<span class="string">"@id/user_account"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignTop</span>=<span class="string">"@id/user_account"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginStart</span>=<span class="string">"-10dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"-18dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:text</span>=<span class="string">"@string/account_popup"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textColor</span>=<span class="string">"@color/blaTextColorStrong"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textSize</span>=<span class="string">"12sp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textStyle</span>=<span class="string">"bold"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:visibility</span>=<span class="string">"invisible"</span> /&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 密码栏提示文字 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_pwd_txt"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignStart</span>=<span class="string">"@id/user_pwd"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignTop</span>=<span class="string">"@id/user_pwd"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginStart</span>=<span class="string">"-10dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"-18dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:text</span>=<span class="string">"@string/pwd_popup"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textColor</span>=<span class="string">"@color/blaTextColorStrong"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textSize</span>=<span class="string">"12sp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textStyle</span>=<span class="string">"bold"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:visibility</span>=<span class="string">"invisible"</span> /&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 备注栏提示文字 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_note_txt"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignStart</span>=<span class="string">"@id/user_note"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignTop</span>=<span class="string">"@id/user_note"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginStart</span>=<span class="string">"-8dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"-18dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:text</span>=<span class="string">"@string/note_popup"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textColor</span>=<span class="string">"@color/blaTextColorStrong"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textSize</span>=<span class="string">"12sp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textStyle</span>=<span class="string">"bold"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:visibility</span>=<span class="string">"invisible"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="comment">&lt;!-- 大家应该注意到上面的编辑框还没有写框内右侧的小按钮，下面用ImageView分别加上 --&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="comment">&lt;!-- Icon Chevron related to EditTexts --&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 标题栏按钮。图标是从Android Studio Assets网站下载的 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_title_chevron"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignEnd</span>=<span class="string">"@id/user_title"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignTop</span>=<span class="string">"@id/user_title"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginEnd</span>=<span class="string">"6dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"9dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:src</span>=<span class="string">"@drawable/icon_chevron_right"</span> /&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 帐号栏按钮 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_account_chevron"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignEnd</span>=<span class="string">"@id/user_account"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignTop</span>=<span class="string">"@id/user_account"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginEnd</span>=<span class="string">"6dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"9dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:src</span>=<span class="string">"@drawable/icon_chevron_right"</span> /&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 密码栏按钮 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_pwd_chevron"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignEnd</span>=<span class="string">"@id/user_pwd"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignTop</span>=<span class="string">"@id/user_pwd"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginEnd</span>=<span class="string">"6dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"9dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:src</span>=<span class="string">"@drawable/icon_chevron_right"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">            <span class="comment">&lt;!-- 备注栏没有chevron按钮 --&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ScrollView</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>其中需要用到的背景布局：</p>
<p>1. 标题栏、帐号栏、密码栏背景布局文件：<code>res/drawable/edt_bg_normal.xml</code></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span><br><span class="line"><span class="tag">&lt;<span class="name">selector</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!-- 被按下时的状态（正在按。这个状态很短暂） --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 此时圆角矩形的边框颜色与框内填充颜色融为一体，为纯白色 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">item</span> <span class="attr">android:state_pressed</span>=<span class="string">"true"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">shape</span> <span class="attr">android:shape</span>=<span class="string">"rectangle"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">solid</span> <span class="attr">android:color</span>=<span class="string">"@color/blaEdtColorActivated"</span> /&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">corners</span> <span class="attr">android:radius</span>=<span class="string">"6dp"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">shape</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">item</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!-- 按下后的状态（聚焦状态） --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 此时的状态和上一个一样。不过我们会在代码中给它附加上阴影效果 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">item</span> <span class="attr">android:state_focused</span>=<span class="string">"true"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">shape</span> <span class="attr">android:shape</span>=<span class="string">"rectangle"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">solid</span> <span class="attr">android:color</span>=<span class="string">"@color/blaEdtColorActivated"</span> /&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">corners</span> <span class="attr">android:radius</span>=<span class="string">"6dp"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">shape</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">item</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!-- 普通状态（未获得焦点时的状态） --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 边框颜色为浅灰色（与hint文字颜色一致），框内填充色为纯白色 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">item</span> <span class="attr">android:state_window_focused</span>=<span class="string">"false"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">shape</span> <span class="attr">android:shape</span>=<span class="string">"rectangle"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">solid</span> <span class="attr">android:color</span>=<span class="string">"@color/blaEdtColorNormal"</span> /&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">stroke</span> <span class="attr">android:width</span>=<span class="string">"1dp"</span> <span class="attr">android:color</span>=<span class="string">"@color/blaTextColorWeak"</span> /&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">corners</span> <span class="attr">android:radius</span>=<span class="string">"6dp"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">shape</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">item</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">selector</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>2. 备注栏的背景布局文件：<code>res/drawable/edt_bg_normal_note.xml</code></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span><br><span class="line"><span class="tag">&lt;<span class="name">selector</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 被按下时的状态（正在按。这个状态很短暂） --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 省略不写 --&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!-- 按下后的状态（聚焦状态） --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 这里引用了一个图片资源。在下一小节会对其讲解 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">item</span> <span class="attr">android:drawable</span>=<span class="string">"@drawable/edt_bg_shadow"</span> <span class="attr">android:state_focused</span>=<span class="string">"true"</span> /&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!-- 普通状态（未获得焦点时的初始状态。和上一个背景的初始状态一样） --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">item</span> <span class="attr">android:state_window_focused</span>=<span class="string">"false"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">shape</span> <span class="attr">android:shape</span>=<span class="string">"rectangle"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">solid</span> <span class="attr">android:color</span>=<span class="string">"@color/blaEdtColorNormal"</span> /&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">stroke</span> <span class="attr">android:width</span>=<span class="string">"1dp"</span> <span class="attr">android:color</span>=<span class="string">"@color/blaTextColorWeak"</span> /&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">corners</span> <span class="attr">android:radius</span>=<span class="string">"6dp"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">shape</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">item</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">selector</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="3-阴影该怎么制作？"><a href="#3-阴影该怎么制作？" class="headerlink" title="3. 阴影该怎么制作？"></a>3. 阴影该怎么制作？</h2><p>Android 5.0加入了高度（elevation）属性，只需要在EditText中设置<code>elevation=&quot;6&quot;</code>即可生成高度为6dp（z=6）的阴影。</p>
<p><strong>但是用这个方法做出来的阴影效果并不好看：</strong></p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-31/20536407.jpg" alt=""></p>
<p>并且elevation属性也不支持调节阴影方向、blur值以及阴影颜色。为了实现和Axure软件同样的效果，我们要考虑采用哪种阴影方案：</p>
<table>
<thead>
<tr>
<th>方案</th>
<th>说明</th>
<th>缺点</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>增加elevation高度</td>
<td>效果不好，是向四周扩散的</td>
</tr>
<tr>
<td>2</td>
<td>看看有没更改阴影颜色的代码</td>
<td>默认不支持，自定义太麻烦</td>
</tr>
<tr>
<td>3</td>
<td>使用嵌套结构layer-list</td>
<td>阴影效果不好，没办法做出来设计图中的效果</td>
</tr>
<tr>
<td>4</td>
<td>使用translation x &amp; y</td>
<td>会造成点击错位（不过影响不大），实际测试还是觉得阴影的效果不好</td>
</tr>
<tr>
<td>5</td>
<td>使用开源组件——<a href="https://github.com/dmytrodanylyk/shadow-layout" target="_blank" rel="noopener">shadow layout</a>的功能特性非常符合需求</td>
<td>shadow-layout需要给每个view套一个外壳，且自带4dp内间距，导致提示文字和按钮的相对位置一直调不准</td>
</tr>
<tr>
<td>6</td>
<td>使用CardView</td>
<td>CardView缺点见这里：<a href="https://github.com/dmytrodanylyk/shadow-layout/wiki#why-this-library-was-created" target="_blank" rel="noopener">Home · dmytrodanylyk/shadow-layout Wiki</a></td>
</tr>
<tr>
<td>7</td>
<td>使用点九图制作</td>
<td>ok</td>
</tr>
</tbody>
</table>
<p>最终我们选择了点九图制作，这里推荐使用<a href="https://inloop.github.io/shadow4android/" target="_blank" rel="noopener">Android Shadow Generator</a>在线网站来生成点九图。你可以自定义边角弧度、阴影偏离方向、blur值以及阴影颜色，理论上可以完美实现和Axure设计图一致的阴影效果：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-31/99064327.jpg" alt=""></p>
<p><strong>注意：点九图参数设置：</strong></p>
<p>不同的分辨率对应的参数值是不一样的。总的来说我们需要制作以下三种点九图：</p>
<table>
<thead>
<tr>
<th>切图</th>
<th>Radius（边框圆角半径）/px</th>
<th>x偏移/px</th>
<th>y偏移/px</th>
<th>blur</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>一倍切图（360px*640px）</td>
<td>6</td>
<td>5</td>
<td>5</td>
<td>8</td>
<td>一倍切图就是我们在设计稿中的分辨率</td>
</tr>
<tr>
<td>二倍切图（720px*1280px）</td>
<td>12</td>
<td>10</td>
<td>10</td>
<td>16</td>
<td>二倍切图就是xhdpi等级</td>
</tr>
<tr>
<td>三倍切图（1080px*1920px）</td>
<td>18</td>
<td>15</td>
<td>15</td>
<td>24</td>
<td>三倍切图就是xxhdpi等级。<br>我们使用的Pixel模拟器就是这个等级，其dp-px换算关系为1dp=3px</td>
</tr>
</tbody>
</table>
<p>因此我们最好做三种贴图并放到对应的分辨率目录（不过为了测试方便，这里我只做了三倍切图的阴影）。</p>
<p>属性如下：</p>
<table>
<thead>
<tr>
<th>Basic</th>
<th>Fill &amp; Outline</th>
<th>Advanced</th>
<th>Preview</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>Round = 18</td>
<td>Unenabled</td>
<td>Box Size width = 144</td>
<td>/</td>
<td>/</td>
</tr>
<tr>
<td>Shadow blur = 24</td>
<td>/</td>
<td>Box Size height = 144</td>
<td>/</td>
<td>/</td>
</tr>
<tr>
<td>Shadow color: rgba(0,0,0,0.35)</td>
<td>/</td>
<td>/</td>
<td>/</td>
<td>/</td>
</tr>
<tr>
<td>Shadow offset X = 15</td>
<td>/</td>
<td>/</td>
<td>/</td>
<td>/</td>
</tr>
<tr>
<td>Shadow offset y = 15</td>
<td>/</td>
<td>/</td>
<td>/</td>
<td>文件下载：<a href="https://pan.baidu.com/s/1slFnckP" target="_blank" rel="noopener">edt_bg_shadow.9.png</a></td>
</tr>
</tbody>
</table>
<p>把下载下来的点九图阴影复制到drawable目录下，接着我们给右分页布局中的EditText控件添加阴影：</p>
<p><code>res/layout/page2.xml</code></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ScrollView</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- 头像的背景，根据头像主色调来生成（方法在函数中实现） --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ImageView</span> <span class="attr">...</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- 使用开源控件CircleTextImageView制作圆形头像 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">com.thinkcool.circletextimageview.CircleTextImageView</span> <span class="attr">...</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- EditText shadow on the behind --&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 1. 阴影放在EditText之前写，这样可以让后写的控件压到先写的阴影之上 --&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 2. 阴影的长宽比EditText各多出10dp，这个是目测出来的结果（[WHY?](http://ozurciydg.bkt.clouddn.com/17-12-31/86825566.jpg)） --&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 3. 阴影默认状态是隐藏的，只有在EditText被点击时才会被触发 --&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- 标题栏的阴影 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/user_title_shadow"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"250dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"38dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_alignStart</span>=<span class="string">"@id/user_title"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_alignTop</span>=<span class="string">"@id/user_title"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:background</span>=<span class="string">"@drawable/edt_bg_shadow"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:visibility</span>=<span class="string">"invisible"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 帐号栏的阴影 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/user_account_shadow"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"250dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"38dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_alignStart</span>=<span class="string">"@id/user_account"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_alignTop</span>=<span class="string">"@id/user_account"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:background</span>=<span class="string">"@drawable/edt_bg_shadow"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:visibility</span>=<span class="string">"invisible"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 密码栏的阴影 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/user_pwd_shadow"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"250dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"38dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_alignStart</span>=<span class="string">"@id/user_pwd"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_alignTop</span>=<span class="string">"@id/user_pwd"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:background</span>=<span class="string">"@drawable/edt_bg_shadow"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:visibility</span>=<span class="string">"invisible"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- 由于备注栏的高度是随文本多少而动态变化的，使用阴影的话需要在代码中动态匹配，一方面逻辑比较复杂，另一方面实测发现设定了“inputType="textMultiLines"”属性的EditText无法监听按键事件，给我们的匹配方法造成了致命的阻碍。因此我们不制作备注栏阴影，改用了另一种更省事的方法（下面会说） --&gt;</span></span><br><span class="line">            </span><br><span class="line">        <span class="comment">&lt;!-- EditText --&gt;</span></span><br><span class="line">            </span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span> <span class="attr">android:id</span>=<span class="string">"@+id/user_title"</span> <span class="attr">...</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span> <span class="attr">android:id</span>=<span class="string">"@+id/user_account"</span> <span class="attr">...</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span> <span class="attr">android:id</span>=<span class="string">"@+id/user_pwd"</span> <span class="attr">...</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span> <span class="attr">android:id</span>=<span class="string">"@+id/user_note"</span> <span class="attr">...</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">        ...</span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ScrollView</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>由于备注栏的高度是随文本多少而动态变化的，使用阴影的话需要在代码中动态匹配，一方面逻辑比较复杂，<em>另一方面实测发现设定了“inputType=”textMultiLines””属性的EditText无法监听按键事件，给我们的匹配方法造成了致命的阻碍</em>。因此我们不得不手动将点九图阴影直接写入到备注栏的背景中去：</p>
<p><code>res/drawable/edt_bg_normal_note.xml</code></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">selector</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!-- 按下后的状态（聚焦状态） --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 这里引用了一个图片资源 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">item</span> <span class="attr">android:drawable</span>=<span class="string">"@drawable/edt_bg_shadow"</span> <span class="attr">android:state_focused</span>=<span class="string">"true"</span> /&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!-- 普通状态 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">item</span> <span class="attr">...</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">selector</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h1 id="四、启动测试"><a href="#四、启动测试" class="headerlink" title="四、启动测试"></a>四、启动测试</h1><p>由于我们对右分页布局进行了大换血，原MainActivity中的很多代码可能不能再使用了，为了保证本次测试成功，我们需要适当地对MainActivity进行一番改动（主要就是把以前的关联代码注释掉或删除掉）：</p>
<p><code>MainActivity.java</code></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> com.likianta.anykey;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> android.content.Context;</span><br><span class="line"><span class="keyword">import</span> android.content.Intent;</span><br><span class="line"><span class="keyword">import</span> android.support.v4.view.PagerAdapter;</span><br><span class="line"><span class="keyword">import</span> android.support.v4.view.ViewPager;</span><br><span class="line"><span class="keyword">import</span> android.support.v7.app.AppCompatActivity;</span><br><span class="line"><span class="keyword">import</span> android.os.Bundle;</span><br><span class="line"><span class="keyword">import</span> android.support.v7.widget.LinearLayoutManager;</span><br><span class="line"><span class="keyword">import</span> android.support.v7.widget.RecyclerView;</span><br><span class="line"><span class="keyword">import</span> android.view.KeyEvent;</span><br><span class="line"><span class="keyword">import</span> android.view.LayoutInflater;</span><br><span class="line"><span class="keyword">import</span> android.view.View;</span><br><span class="line"><span class="keyword">import</span> android.view.ViewGroup;</span><br><span class="line"><span class="keyword">import</span> android.view.animation.Animation;</span><br><span class="line"><span class="keyword">import</span> android.view.animation.AnimationUtils;</span><br><span class="line"><span class="keyword">import</span> android.view.inputmethod.InputMethodManager;</span><br><span class="line"><span class="keyword">import</span> android.widget.Button;</span><br><span class="line"><span class="keyword">import</span> android.widget.EditText;</span><br><span class="line"><span class="keyword">import</span> android.widget.ImageView;</span><br><span class="line"><span class="keyword">import</span> android.widget.TextView;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> com.thinkcool.circletextimageview.CircleTextImageView;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> java.util.ArrayList;</span><br><span class="line"><span class="keyword">import</span> java.util.List;</span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MainActivity</span> <span class="keyword">extends</span> <span class="title">AppCompatActivity</span> <span class="keyword">implements</span> <span class="title">View</span>.<span class="title">OnClickListener</span> </span>&#123;</span><br><span class="line">    </span><br><span class="line">    List&lt;CardData&gt; cardDataList = <span class="keyword">new</span> ArrayList&lt;&gt;();</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 以下变量是与分页相关的变量</span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">private</span> View page1; <span class="comment">// 左分页</span></span><br><span class="line">    <span class="keyword">private</span> View page2; <span class="comment">// 右分页</span></span><br><span class="line">    <span class="keyword">private</span> ViewPager viewPager; <span class="comment">// 控制分页逻辑的容器</span></span><br><span class="line">    <span class="keyword">private</span> ArrayList&lt;View&gt; pageList; <span class="comment">// 装载分页元素的容器</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 以下变量是与左分页相关的控件</span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">private</span> RecyclerView recyclerView; <span class="comment">// 卡片列表</span></span><br><span class="line">    <span class="keyword">private</span> CardAdapter cardAdapter;</span><br><span class="line">    <span class="keyword">private</span> DataAdapter dataAdapter;</span><br><span class="line">    <span class="keyword">private</span> List&lt;Card&gt; cardList = <span class="keyword">new</span> ArrayList&lt;&gt;(); <span class="comment">// 卡片数据</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 以下变量是与右分页相关的控件</span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">private</span> CircleTextImageView userAvatar;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">private</span> EditText userTitle;</span><br><span class="line">    <span class="keyword">private</span> EditText userAccount;</span><br><span class="line">    <span class="keyword">private</span> EditText userPassword;</span><br><span class="line">    <span class="keyword">private</span> EditText userNote;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">private</span> ImageView userTitleShadow;</span><br><span class="line">    <span class="keyword">private</span> ImageView userAccountShadow;</span><br><span class="line">    <span class="keyword">private</span> ImageView userPasswordShadow;</span><br><span class="line">    <span class="keyword">private</span> ImageView userTitleChevron;</span><br><span class="line">    <span class="keyword">private</span> ImageView userAccountChevron;</span><br><span class="line">    <span class="keyword">private</span> ImageView userPasswordChevron;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">private</span> TextView userTitleText;</span><br><span class="line">    <span class="keyword">private</span> TextView userAccountText;</span><br><span class="line">    <span class="keyword">private</span> TextView userPasswordText;</span><br><span class="line">    <span class="keyword">private</span> TextView userNoteText;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">private</span> Button userSaveButton;</span><br><span class="line">    <span class="keyword">private</span> String groupName = <span class="string">"未分类"</span>; <span class="comment">// temple conversion string</span></span><br><span class="line">    </span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onCreate</span><span class="params">(Bundle savedInstanceState)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>.onCreate(savedInstanceState);</span><br><span class="line">        setContentView(R.layout.activity_main);</span><br><span class="line">        </span><br><span class="line">        <span class="comment">// 开始绑定按钮</span></span><br><span class="line">        initBinding();</span><br><span class="line">        </span><br><span class="line">        <span class="comment">// 初始化左分页</span></span><br><span class="line">        initPager1();</span><br><span class="line">        </span><br><span class="line">        <span class="comment">// 初始化右分页（在onCreate方法中没必要做。在点击保存按钮后使用该方法来清空右分页的表单编辑框）</span></span><br><span class="line">        <span class="comment">// initPager2();</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">// 监听按钮点击</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">// test</span></span><br><span class="line">        Button button = (Button) findViewById(R.id.btn_test);</span><br><span class="line">        button.setOnClickListener(<span class="keyword">this</span>);</span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">initBinding</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        </span><br><span class="line">        viewPager = (ViewPager) findViewById(R.id.view_pager);</span><br><span class="line">        </span><br><span class="line">        <span class="comment">// 用LayoutInflater来绑定布局</span></span><br><span class="line">        LayoutInflater inflater = getLayoutInflater();</span><br><span class="line">        page1 = inflater.inflate(R.layout.page1, <span class="keyword">null</span>); <span class="comment">// 预加载左分页</span></span><br><span class="line">        page2 = inflater.inflate(R.layout.page2, <span class="keyword">null</span>); <span class="comment">// 预加载右分页</span></span><br><span class="line">        pageList = <span class="keyword">new</span> ArrayList&lt;&gt;(); <span class="comment">// pageList被实例化为装载View元素的数组</span></span><br><span class="line">        pageList.add(page1);</span><br><span class="line">        pageList.add(page2);</span><br><span class="line">        <span class="comment">// add的先后顺序不要搞错，先add的就是array[0]位置的元素了</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">// 绑定分页的按钮</span></span><br><span class="line">        recyclerView = (RecyclerView) page1.findViewById(R.id.page1_recycler);</span><br><span class="line">        </span><br><span class="line">        <span class="comment">// bind page2 views</span></span><br><span class="line">        </span><br><span class="line">        userAvatar = (CircleTextImageView) page2.findViewById(R.id.user_avatar);</span><br><span class="line">        </span><br><span class="line">        userTitle = (EditText) page2.findViewById(R.id.user_title);</span><br><span class="line">        userTitleShadow = (ImageView) page2.findViewById(R.id.user_title_shadow);</span><br><span class="line">        userTitleText = (TextView) page2.findViewById(R.id.user_title_txt);</span><br><span class="line">        userTitleChevron = (ImageView) page2.findViewById(R.id.user_title_chevron);</span><br><span class="line">        </span><br><span class="line">        userAccount = (EditText) page2.findViewById(R.id.user_account);</span><br><span class="line">        userAccountShadow = (ImageView) page2.findViewById(R.id.user_account_shadow);</span><br><span class="line">        userAccountText = (TextView) page2.findViewById(R.id.user_account_txt);</span><br><span class="line">        userAccountChevron = (ImageView) page2.findViewById(R.id.user_account_chevron);</span><br><span class="line">        </span><br><span class="line">        userPassword = (EditText) page2.findViewById(R.id.user_pwd);</span><br><span class="line">        userPasswordShadow = (ImageView) page2.findViewById(R.id.user_pwd_shadow);</span><br><span class="line">        userPasswordText = (TextView) page2.findViewById(R.id.user_pwd_txt);</span><br><span class="line">        userPasswordChevron = (ImageView) page2.findViewById(R.id.user_pwd_chevron);</span><br><span class="line">        </span><br><span class="line">        userNote = (EditText) page2.findViewById(R.id.user_note);</span><br><span class="line">        userNoteText = (TextView) page2.findViewById(R.id.user_note_txt);</span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">initPager1</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        PagerAdapter pagerAdapter = <span class="keyword">new</span> PagerAdapter() &#123;</span><br><span class="line">            <span class="comment">// https://www.cnblogs.com/weixing/archive/2013/10/11/3363951.html</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">// 获取页卡总数量</span></span><br><span class="line">            <span class="meta">@Override</span></span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getCount</span><span class="params">()</span> </span>&#123;</span><br><span class="line">                <span class="keyword">return</span> pageList.size();</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            <span class="comment">// 判断是否由对象生成界面，这个很重要，是用来把pageView数组中的page1和page2生成到当前布局中的方法</span></span><br><span class="line">            <span class="meta">@Override</span></span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">boolean</span> <span class="title">isViewFromObject</span><span class="params">(View view, Object object)</span> </span>&#123;</span><br><span class="line">                <span class="keyword">return</span> view == object;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            <span class="comment">// 使从ViewGroup中移出当前View</span></span><br><span class="line">            <span class="meta">@Override</span></span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">destroyItem</span><span class="params">(ViewGroup arg0, <span class="keyword">int</span> arg1, Object arg2)</span> </span>&#123;</span><br><span class="line">                ((ViewPager) arg0).removeView(pageList.get(arg1));</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            <span class="comment">// 返回一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中</span></span><br><span class="line">            <span class="meta">@Override</span></span><br><span class="line">            <span class="function"><span class="keyword">public</span> Object <span class="title">instantiateItem</span><span class="params">(ViewGroup arg0, <span class="keyword">int</span> arg1)</span> </span>&#123;</span><br><span class="line">                <span class="comment">//这个方法用来实例化页卡</span></span><br><span class="line">                ((ViewPager) arg0).addView(pageList.get(arg1));</span><br><span class="line">                <span class="keyword">return</span> pageList.get(arg1);</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">        &#125;;</span><br><span class="line">        viewPager.setAdapter(pagerAdapter); <span class="comment">// 绑定适配器</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">// 设置viewPager的初始界面为第一个界面</span></span><br><span class="line">        viewPager.setCurrentItem(<span class="number">0</span>); <span class="comment">// 这里的0对应的是viewPager[0]，也就是page1了</span></span><br><span class="line">        <span class="comment">// 添加切换界面的监听器</span></span><br><span class="line">        viewPager.addOnPageChangeListener(<span class="keyword">new</span> MyOnPageChangeListener());</span><br><span class="line">        </span><br><span class="line">        <span class="comment">// 为左分页加载卡片列表</span></span><br><span class="line">        <span class="comment">//PageRender();</span></span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">initPager2</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        userTitle.setText(<span class="string">""</span>);</span><br><span class="line">        userAccount.setText(<span class="string">""</span>);</span><br><span class="line">        userPassword.setText(<span class="string">""</span>);</span><br><span class="line">        userNote.setText(<span class="string">""</span>);</span><br><span class="line">        </span><br><span class="line">        <span class="comment">// 不知道什么原因，如果在此处重置头像为默认，会发现卡片头像也会“突变”为默认。</span></span><br><span class="line">        <span class="comment">// 而把重置头像的业务放到页面监听里面就不会引起此bug，所以不得已把头像重置的代码放到MyOnPageChangeListener的case1里面了</span></span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 渲染分页</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">PageRender</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        cardDataList = <span class="keyword">new</span> SavedToMySharedPrefs(MainActivity.<span class="keyword">this</span>, <span class="string">"card_data"</span>).getCardData();</span><br><span class="line">        dataAdapter = <span class="keyword">new</span> DataAdapter(cardDataList);</span><br><span class="line">        recyclerView.setLayoutManager(<span class="keyword">new</span> LinearLayoutManager(<span class="keyword">this</span>));</span><br><span class="line">        recyclerView.setAdapter(dataAdapter);</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onClick</span><span class="params">(View view)</span> </span>&#123;</span><br><span class="line">        </span><br><span class="line">        <span class="keyword">switch</span> (view.getId()) &#123;</span><br><span class="line">            <span class="keyword">case</span> R.id.btn_test:</span><br><span class="line">                <span class="keyword">int</span> w = userNote.getWidth();</span><br><span class="line">                <span class="keyword">int</span> h = userNote.getHeight();</span><br><span class="line">                LogUtil.d(<span class="string">"ma user title edit text width is: "</span> + w);</span><br><span class="line">                LogUtil.d(<span class="string">"ma user title edit text height is: "</span> + h);</span><br><span class="line">            <span class="keyword">default</span>:</span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 判断从GroupActivity来的返回值</span></span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onActivityResult</span><span class="params">(<span class="keyword">int</span> requestCode, <span class="keyword">int</span> resultCode, Intent intent)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">switch</span> (requestCode) &#123;</span><br><span class="line">            <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">                <span class="keyword">if</span> (resultCode == RESULT_OK) &#123;</span><br><span class="line">                    groupName = intent.getStringExtra(<span class="string">"get groupName"</span>);</span><br><span class="line">                    LogUtil.d(<span class="string">"ma you get the returned result (groupName): "</span> + groupName);</span><br><span class="line">                &#125;</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">            <span class="keyword">default</span>:</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onDestroy</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>.onDestroy();</span><br><span class="line">        </span><br><span class="line">        <span class="comment">// Save all data.</span></span><br><span class="line">        <span class="keyword">new</span> SavedToMySharedPrefs(MainActivity.<span class="keyword">this</span>, <span class="string">"card_data"</span>).setCardData(cardDataList);</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 页面滚动监听器功能，实现标签页左右滑动切换效果</span></span><br><span class="line">    <span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MyOnPageChangeListener</span> <span class="keyword">implements</span> <span class="title">ViewPager</span>.<span class="title">OnPageChangeListener</span> </span>&#123;</span><br><span class="line">        </span><br><span class="line">        <span class="meta">@Override</span></span><br><span class="line">        <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onPageSelected</span><span class="params">(<span class="keyword">int</span> index)</span> </span>&#123;</span><br><span class="line">            <span class="keyword">switch</span> (index) &#123;</span><br><span class="line">                <span class="keyword">case</span> <span class="number">0</span>:</span><br><span class="line">                    InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);</span><br><span class="line">                    inputMethodManager.hideSoftInputFromWindow(MainActivity.<span class="keyword">this</span>.getCurrentFocus().getWindowToken(), <span class="number">0</span>); <span class="comment">// 强制隐藏软键盘</span></span><br><span class="line">                    <span class="keyword">break</span>;</span><br><span class="line">                <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">                    userAvatar.setText(<span class="string">""</span>);</span><br><span class="line">                    userAvatar.setImageResource(R.drawable.avatar_test);</span><br><span class="line">                    <span class="keyword">break</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">        <span class="meta">@Override</span></span><br><span class="line">        <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onPageScrolled</span><span class="params">(<span class="keyword">int</span> arg0, <span class="keyword">float</span> arg1, <span class="keyword">int</span> arg2)</span> </span>&#123;</span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">        <span class="meta">@Override</span></span><br><span class="line">        <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onPageScrollStateChanged</span><span class="params">(<span class="keyword">int</span> arg0)</span> </span>&#123;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>另外对<code>activity_main.xml</code>也做了大幅度简化：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span><br><span class="line"><span class="tag">&lt;<span class="name">RelativeLayout</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">xmlns:tools</span>=<span class="string">"http://schemas.android.com/tools"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:background</span>=<span class="string">"@color/colorWhite"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">tools:context</span>=<span class="string">"com.likianta.anykey.MainActivity"</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!-- 分页容器 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">android.support.v4.view.ViewPager</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/view_pager"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_alignParentTop</span>=<span class="string">"true"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">android.support.v4.view.ViewPager</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;<span class="name">Button</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/btn_test"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:text</span>=<span class="string">"test"</span>/&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="实际测试效果"><a href="#实际测试效果" class="headerlink" title="实际测试效果"></a>实际测试效果</h2><p>（这里用的是下一章的图。里面增加了按钮动画和文本判断）</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-31/6414234.jpg" alt=""></p>
<p>经过精心的制作后，我们本章的主要任务就完成了。</p>
<p>通过这次制作过程我们会发现，在设计时有很多细节都是考虑不到的，比如说EditText的<code>inputType</code>、颜色值的百分比转换、阴影的制作问题等。通过自己的设计和实现可以对产品的开发有更多认识。</p>
<p>下章将讲解如何制作按钮的点击动画，以及根据文本内容适用不同的背景资源。</p>
<blockquote>
<p>下章链接：<a href="https://likianta.coding.me/2017/PassportPandoraPrj/1231204322/">https://likianta.coding.me/2017/PassportPandoraPrj/1231204322/</a></p>
</blockquote>
<hr>
<h1 id="五、扩展环节"><a href="#五、扩展环节" class="headerlink" title="五、扩展环节"></a>五、扩展环节</h1><h2 id="1-如何让EditText默认不获取焦点？"><a href="#1-如何让EditText默认不获取焦点？" class="headerlink" title="1. 如何让EditText默认不获取焦点？"></a>1. 如何让EditText默认不获取焦点？</h2><p>在第一次打开后滑动到右分页，会发现标题栏会自动获取到焦点。为了让它不默认获取焦点，我们需要让别的View率先抢占焦点（只需增加两行代码）：</p>
<p><code>page2.xml</code></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ScrollView</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- 头像的背景 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ImageView</span> <span class="attr">...</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- 圆形头像。让圆形头像抢占焦点 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">com.thinkcool.circletextimageview.CircleTextImageView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">...</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:focusable</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:focusableInTouchMode</span>=<span class="string">"true"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- EditText shadow on the behind --&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">ImageView</span> <span class="attr">android:id</span>=<span class="string">"@+id/user_title_shadow"</span> <span class="attr">...</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ImageView</span> <span class="attr">android:id</span>=<span class="string">"@+id/user_account_shadow"</span> <span class="attr">...</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ImageView</span> <span class="attr">android:id</span>=<span class="string">"@+id/user_pwd_shadow"</span> <span class="attr">...</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- EditText --&gt;</span></span><br><span class="line">            </span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span> <span class="attr">android:id</span>=<span class="string">"@+id/user_title"</span> <span class="attr">...</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span> <span class="attr">android:id</span>=<span class="string">"@+id/user_account"</span> <span class="attr">...</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span> <span class="attr">android:id</span>=<span class="string">"@+id/user_pwd"</span> <span class="attr">...</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span> <span class="attr">android:id</span>=<span class="string">"@+id/user_note"</span> <span class="attr">...</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">        ...</span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ScrollView</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="2-自定义光标样式"><a href="#2-自定义光标样式" class="headerlink" title="2. 自定义光标样式"></a>2. 自定义光标样式</h2><p>Android默认的光标是粉红色的，我们可以修改为自定义的光标样式。</p>
<p>首先创建一个背景布局<code>res/drawable/shape_cursor.xml</code>：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">shape</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:shape</span>=<span class="string">"rectangle"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">size</span> <span class="attr">android:width</span>=<span class="string">"2dp"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">solid</span> <span class="attr">android:color</span>=<span class="string">"@color/colorBlack"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">shape</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>然后让右分页的编辑框的光标全部装载此样式：</p>
<p><code>page2.xml</code></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ScrollView</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        ...</span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- EditText --&gt;</span></span><br><span class="line">            </span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/user_title"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">...</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textCursorDrawable</span>=<span class="string">"@drawable/shape_cursor"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/user_account"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">...</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textCursorDrawable</span>=<span class="string">"@drawable/shape_cursor"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/user_pwd"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">...</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textCursorDrawable</span>=<span class="string">"@drawable/shape_cursor"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/user_note"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">...</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textCursorDrawable</span>=<span class="string">"@drawable/shape_cursor"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">        ...</span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ScrollView</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="3-为备注栏制作专用的阴影图"><a href="#3-为备注栏制作专用的阴影图" class="headerlink" title="3. 为备注栏制作专用的阴影图"></a>3. 为备注栏制作专用的阴影图</h2><p>新的点九图更改了阴影的x偏移值，使备注栏的左侧不至于过白，和背景分不清楚。</p>
<p>文件下载：<a href="https://pan.baidu.com/s/1kUSGm15" target="_blank" rel="noopener"><code>edt_bg_shadow_note.9.png</code></a></p>
<p>在<code>res/drawable/edt_bg_normal_note.xml</code>中修改为：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span><br><span class="line"><span class="tag">&lt;<span class="name">selector</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;<span class="name">item</span> <span class="attr">android:drawable</span>=<span class="string">"@drawable/edt_bg_shadow_note"</span> <span class="attr">android:state_focused</span>=<span class="string">"true"</span> /&gt;</span></span><br><span class="line">    </span><br><span class="line">    ...</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">selector</span>&gt;</span></span><br></pre></td></tr></table></figure>
<hr>
<h1 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h1><ol>
<li>【新提醒】关于虚拟按键高度，懂得且感兴趣过来探讨一下 - LG G2 安卓论坛 机锋论坛 <a href="http://bbs.gfan.com/android-7971983-1-1.html" target="_blank" rel="noopener">http://bbs.gfan.com/android-7971983-1-1.html</a></li>
<li>Android 5.x新特性之elevation(阴影),tinting（着色）以及clipping（剪裁） - 笨笨丫头~双 - 博客园 <a href="https://www.cnblogs.com/ai394495243/p/5075758.html" target="_blank" rel="noopener">https://www.cnblogs.com/ai394495243/p/5075758.html</a></li>
<li>Android 动画 - TranslateAnimation位移动画 - CSDN博客 <a href="http://blog.csdn.net/shibin1990_/article/details/51602564" target="_blank" rel="noopener">http://blog.csdn.net/shibin1990_/article/details/51602564</a></li>
<li>颜色相关<ol>
<li>ANDROID TEXTVIEW 设置字体颜色 - CSDN博客 <a href="http://blog.csdn.net/maigan323/article/details/7026218/" target="_blank" rel="noopener">http://blog.csdn.net/maigan323/article/details/7026218/</a></li>
<li>百分比换算十六进制透明度 - CSDN博客 <a href="http://blog.csdn.net/lyltiger/article/details/48292419" target="_blank" rel="noopener">http://blog.csdn.net/lyltiger/article/details/48292419</a></li>
<li>android颜色渐变如何实现从四周往中心渐变 或者从中心往四周渐变 都行，不是 从左往右_百度知道 <a href="https://zhidao.baidu.com/question/329382365.html" target="_blank" rel="noopener">https://zhidao.baidu.com/question/329382365.html</a></li>
<li>colorAccent,colorPrimary,colorPrimaryDark……来这里你就明白了 - Louie81的博客 - CSDN博客 <a href="http://blog.csdn.net/Louie81/article/details/78789285" target="_blank" rel="noopener">http://blog.csdn.net/Louie81/article/details/78789285</a></li>
</ol>
</li>
<li>EditText相关<ol>
<li>Android：EditText 多行显示及所有属性 - CSDN博客 <a href="http://blog.csdn.net/qyf_5445/article/details/8651740" target="_blank" rel="noopener">http://blog.csdn.net/qyf_5445/article/details/8651740</a></li>
<li>Android 设置EditText光标Cursor颜色及粗细 - 享受技术带来的快乐 - CSDN博客 <a href="http://blog.csdn.net/jdsjlzx/article/details/45075865" target="_blank" rel="noopener">http://blog.csdn.net/jdsjlzx/article/details/45075865</a></li>
<li>Android 如何让EditText不自动获取焦点 - java豆子 - 博客园 <a href="https://www.cnblogs.com/error404/archive/2012/12/28/2837294.html" target="_blank" rel="noopener">https://www.cnblogs.com/error404/archive/2012/12/28/2837294.html</a></li>
<li><a href="http://m.blog.csdn.net/hotlinhao/article/details/41821279" target="_blank" rel="noopener">http://m.blog.csdn.net/hotlinhao/article/details/41821279</a></li>
<li>Android中EditView TextView (padding失效)使用setBackgroundDrawable或setBackgroundResource则xml中设置的 Padding失效 - 风一样的男人 - CSDN博客 <a href="http://blog.csdn.net/a2241076850/article/details/73481378" target="_blank" rel="noopener">http://blog.csdn.net/a2241076850/article/details/73481378</a></li>
<li>Android 对TextView添加删除线,下划线,加粗,斜体等效果 - CSDN博客 <a href="http://blog.csdn.net/lzyang187/article/details/50695563" target="_blank" rel="noopener">http://blog.csdn.net/lzyang187/article/details/50695563</a></li>
<li>真正解决TextView行间距、字间距的问题 - CSDN博客 <a href="http://blog.csdn.net/peter6359312/article/details/52370949" target="_blank" rel="noopener">http://blog.csdn.net/peter6359312/article/details/52370949</a></li>
</ol>
</li>
</ol>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
        <div class="post-widgets">
        

        

        
          
          <div id="needsharebutton-postbottom">
            <span class="btn">
              <i class="fa fa-share-alt" aria-hidden="true"></i>
            </span>
          </div>
        
        </div>
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/1228165758/" rel="next" title="Hexo部署问题详解">
                <i class="fa fa-chevron-left"></i> Hexo部署问题详解
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/1229202646/" rel="prev" title="Hexo\scaffolds\post.md模板中的变量详解">
                Hexo\scaffolds\post.md模板中的变量详解 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
      <div id="lv-container" data-id="city" data-uid="MTAyMC8zNDI4MS8xMDgxOA=="></div>
    </div>

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="http://ozurciydg.bkt.clouddn.com/18-2-12/72826549.jpg"
                alt="Likianta" />
            
              <p class="site-author-name" itemprop="name">Likianta</p>
              <p class="site-description motion-element" itemprop="description">Android Dev</p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">73</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">8</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">2</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="http://blog.csdn.net/likianta" target="_blank" title="CSDN">
                      
                        <i class="fa fa-fw fa-crosshairs"></i>CSDN</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="mailto:sheerish@qq.com" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/likianta" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://weibo.com/5441767757/profile?rightmod=1&wvr=6&mod=personinfo" target="_blank" title="Weibo">
                      
                        <i class="fa fa-fw fa-weibo"></i>Weibo</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#一、重新制作右分页布局"><span class="nav-text">一、重新制作右分页布局</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-使用Axure软件进行原型设计"><span class="nav-text">1. 使用Axure软件进行原型设计</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#第一步-开启网格辅助线"><span class="nav-text">第一步 开启网格辅助线</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第二步-拖入一倍切图"><span class="nav-text">第二步 拖入一倍切图</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第三步-制作右分页母版"><span class="nav-text">第三步 制作右分页母版</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第四步-制作布局里的元素（重点）"><span class="nav-text">第四步 制作布局里的元素（重点）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第五步-添加说明注释和跳转链接"><span class="nav-text">第五步 添加说明注释和跳转链接</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#二、在Android-Studio中实现布局"><span class="nav-text">二、在Android Studio中实现布局</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#三、制作右分页布局（xml布局代码）"><span class="nav-text">三、制作右分页布局（xml布局代码）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-将布局中用到的文字全部写到strings-xml文件中"><span class="nav-text">1. 将布局中用到的文字全部写到strings.xml文件中</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-制作xml布局"><span class="nav-text">2. 制作xml布局</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-阴影该怎么制作？"><span class="nav-text">3. 阴影该怎么制作？</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#四、启动测试"><span class="nav-text">四、启动测试</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#实际测试效果"><span class="nav-text">实际测试效果</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#五、扩展环节"><span class="nav-text">五、扩展环节</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-如何让EditText默认不获取焦点？"><span class="nav-text">1. 如何让EditText默认不获取焦点？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-自定义光标样式"><span class="nav-text">2. 自定义光标样式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-为备注栏制作专用的阴影图"><span class="nav-text">3. 为备注栏制作专用的阴影图</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#参考"><span class="nav-text">参考</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; 2017 &mdash; <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Likianta</span>

  
</div>


  <div class="powered-by">
    <i class="fa fa-user-md"></i>
    <span id="busuanzi_container_site_pv">
      Site visitors:<span id="busuanzi_value_site_pv"></span>
    </span>
  </div>

<!--
  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Mist</a> v5.1.3</div>

-->



<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">Site words total count:75.2k</span>
</div>
        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.3"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.3"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.3"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.3"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.3"></script>



  


  




	





  





  
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  












  





  

  

  

  
  
  
  <link rel="stylesheet" href="/lib/needsharebutton/needsharebutton.css">

  
  
  <script src="/lib/needsharebutton/needsharebutton.js"></script>

  <script>
    
      pbOptions = {};
      
          pbOptions.iconStyle = "box";
      
          pbOptions.boxForm = "horizontal";
      
          pbOptions.position = "bottomCenter";
      
          pbOptions.networks = "Weibo,Wechat,Douban,QQZone,Evernote";
      
      new needShareButton('#needsharebutton-postbottom', pbOptions);
    
    
  </script>

  

  

  

  

</body>
</html>
